<script type="text/javascript">
$(document).ready(function() {
    var initial_width;
    $('#qos_table').jqGrid({
        url: '/grid_qos',
        styleUI: 'Bootstrap',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['编号', "[['label name'|translate]]", 'IOPS平均值', "IOPS [['label limit'|translate]]", 'IOPS峰值持续时间（秒）', 'MBPS平均值', "MBPS [['label limit'|translate]](MB)", 'MBPS峰值持续时间（秒）', "[['label volume'|translate]]", "[['label owner'|translate]]", "[['label Creation time'|translate]]", "[['label operation'|translate]]", ],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 6,
            align: '',
            hidden: true
        }, {
            name: 'name',
            index: 'name',
            width: 14,
            align: 'left',
            formatter: function(cellvalue, option, row) {
                return '<a href="#" onclick="detail_open(\'' + option.gid + '\',\'' + option.rowId + '\')">' + cellvalue + '</a>';
            },
            unformat: function(cellvalue) {
                return cellvalue;
            }
        }, {
            name: 'throt_iops_avg',
            index: 'throt_iops_avg',
            width: 13,
            align: 'left',
            hidden: true
        }, {
            name: 'throt_burst_iops_max',
            index: 'throt_burst_iops_max',
            width: 6,
            align: 'left'
        }, {
            name: 'throt_burst_iops_time',
            index: 'throt_burst_iops_time',
            width: 13,
            align: 'left',
            hidden: true
        }, {
            name: 'throt_mbps_avg',
            index: 'throt_mbps_avg',
            width: 13,
            align: 'left',
            hidden: true
        }, {
            name: 'throt_burst_mbps_max',
            index: 'throt_burst_mbps_max',
            width: 6,
            align: 'left',
            formatter: function(cellvalue, option, row) {
                return parseInt(cellvalue) / 1024/1024
            },
            unformat: function(cellvalue) {
                return cellvalue;
            }
        }, {
            name: 'throt_burst_mbps_time',
            index: 'throt_burst_mbps_time',
            width: 13,
            align: 'left',
            hidden: true
        }, {
            name: 'volumes',
            index: 'volumes',
            width: 6,
            sortable: false
        }, {
            name: 'username',
            index: 'username',
            width: 6,
            align: 'left'
        }, {
            name: 'created_at',
            index: 'created_at',
            width: 8,
            align: 'left'
        }, {
            name: 'options',
            index: 'options',
            width: 8,
            align: 'left',
            sortable: false,
            detailHidden:true,
            formatter: function(cell, option, row) {
                var html = '';
                html += '<button title="编辑" class="btn btn-blue" onclick=dialog_qos_update(' + row[0] + ')>编辑</button>';
                html += '<button title="删除" style="margin-left:10px;" class="btn btn-blue" onclick=confirm_qos_delete(' + row[0] + ',"' + row[1] + '")>删除</button>';
                return html;
            }
        }],
        page: 1,
        rowNum: 10,
        sortname: 'id',
        sortorder: 'desc',
        viewrecords: true,
        altclass: 'ui-priority-secondary',
        altRows: true,
        autowidth: true,
        beforeSelectRow:function(rowid, e) {
            if($(e.target).is('input')) {
                return true;
            }
            return false;
        },
        gridComplete: function() {
            var gridData = $(this).jqGrid('getRowData');
            jqgrid_page($(this), gridData);
            jqgrid_resize($(this));
        },
        resizeStart: function() {
            initial_width = $(this).width();
        },
        resizeStop: function() {
            $(this).width(initial_width);
            $(".ui-jqgrid-hbox").find('.ui-jqgrid-htable').width(initial_width);
        }
    });
    $("#div_qos_create").dialog({
        autoOpen: false,
        resizable: true,
        width: 620,
        height: 450,
        modal: true,
        buttons: {
            "确定": function() {
                submit_qos_create(false);
            },
            取消: function() {
                $(this).dialog("close");
            },
        },
    });
    $("#div_qos_update").dialog({
        autoOpen: false,
        resizable: true,
        width: 620,
        height: 450,
        modal: true,
        buttons: {
            "确定": function() {
                submit_qos_update(false);
            },
            取消: function() {
                $(this).dialog("close");
            },
        },
    });

    $("#QoSButton").click(function() {
        angular.element('#QoSDemoCtrl').scope().open("/qos_create");
    });
});

function qos_delete(qos_id) {
    $.ajax({
        url: "/qos_delete",
        type: "POST",
        dataType: "json",
        data: {
            'id': qos_id
        },
        success: function(data) {
            if (data.reply.is_success) {
                $("#qos_table").trigger("reloadGrid");
            } else {
                error = data.reply.error;
                SelfAlert(error);
            }
        }
    });
}

function confirm_qos_delete(qos_id, qos_name) {
    msg = '确定删除QoS（' + qos_name + '）？';
    SelfConfirm(msg, qos_delete, qos_id, "删除提示");
}

function dialog_qos_update(qos_id) {
    angular.element('#QoSDemoCtrl').scope().open("/qos_update?id=" + qos_id);
}
set_tables();
</script>
<div class="panel panel-f-style" ng-controller="QoSDemoCtrl" id="QoSDemoCtrl">
    <div class="panel-body">
        <div class="title-tag">
            <h3>QoS</h3>
            <p>QoS管理</p>
        </div>
        <div class="grid-tools">
            <div class="grid-operate pull-left">
                <button class="btn btn-blue" type="button" id="QoSButton">创建</button>
            </div>
        </div>
        <div class="grid-body" id="gridttt">
            <table id="qos_table"></table>
        </div>
    </div>
</div>
